<template>
    <div>
        <MBX
            level="订单管理"
            level2="订单列表"
        ></MBX>
        <br>
        <el-card>
            <el-row>
                <el-col :span="4">
                    <el-input></el-input>
                </el-col>
            </el-row>
            <el-table :data="order">
                <el-table-column
                    label="#"
                    type="index"
                ></el-table-column>
                <el-table-column
                    label="订单价格"
                    prop="order_price"
                ></el-table-column>
                <el-table-column
                    label="订单编号"
                    prop="order_number"
                ></el-table-column>
                <el-table-column label="是否付款">
                    <template slot-scope="scope">
                        <div>
                            <el-tag v-if="scope.row.order_pay==1">未付款</el-tag>
                            <el-tag
                                v-else
                                type="success"
                            >已付款</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="是否发货"
                    prop="is_send"
                ></el-table-column>
                <el-table-column label="下单时间">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.create_time|time}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div>
                            <el-button
                                type="primary"
                                icon="el-icon-edit"
                                size="mini"
                                @click="dialogVisible=true"
                            ></el-button>
                            <el-button
                                type="warning"
                                icon="el-icon-location-outline"
                                size="mini"
                                @click="dialogVisible1=true"
                            ></el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pagenum"
                :page-sizes="[2, 5, 10, 15]"
                :page-size="page.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
            <!-- 分页 -->
        </el-card>
        <!-- 模态框· -->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
        >
            <el-cascader :options="city"></el-cascader>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="dialogVisible = false"
                >确 定</el-button>
            </span>
        </el-dialog>
        <!-- 模态框· -->
        <!-- 物流模态框· -->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible1"
            width="30%"
        >
            <el-timeline>
                <el-timeline-item
                    v-for="(activity, index) in wuliu"
                    :key="index"
                    :icon="activity.icon"
                    :type="activity.type"
                    :color="activity.color"
                    :size="activity.size"
                    :timestamp="activity.time"
                >
                    {{activity.context}}
                </el-timeline-item>
            </el-timeline>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="dialogVisible1 = false"
                >确 定</el-button>
            </span>
        </el-dialog>
        <!-- 物流模态框· -->
    </div>
</template>

<script>
import city from "@/assets/city.js";
export default {
  data() {
    return {
      city,
      page: {
        query: "",
        pagenum: 1,
        pagesize: 2
      },
      order: [],
      dialogVisible: false,
      dialogVisible1: false,
      wuliu: [
        {
          time: "2018-05-10 09:39:00",
          ftime: "2018-05-10 09:39:00",
          context: "已签收,感谢使用顺丰,期待再次为您服务",
          location: "",
          size: "large",
          type: "primary",
          icon: "el-icon-more"
        },
        {
          time: "2018-05-10 08:23:00",
          ftime: "2018-05-10 08:23:00",
          context:
            "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
          location: ""
        },
        {
          time: "2018-05-10 07:32:00",
          ftime: "2018-05-10 07:32:00",
          context: "快件到达 [北京海淀育新小区营业点]",
          location: ""
        },
        {
          time: "2018-05-10 02:03:00",
          ftime: "2018-05-10 02:03:00",
          context:
            "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
          location: ""
        },
        {
          time: "2018-05-09 23:05:00",
          ftime: "2018-05-09 23:05:00",
          context: "快件到达 [北京顺义集散中心]",
          location: ""
        },
        {
          time: "2018-05-09 21:21:00",
          ftime: "2018-05-09 21:21:00",
          context: "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
          location: ""
        },
        {
          time: "2018-05-09 13:07:00",
          ftime: "2018-05-09 13:07:00",
          context: "顺丰速运 已收取快件",
          location: ""
        },
        {
          time: "2018-05-09 12:25:03",
          ftime: "2018-05-09 12:25:03",
          context: "卖家发货",
          location: ""
        },
        {
          time: "2018-05-09 12:22:24",
          ftime: "2018-05-09 12:22:24",
          context: "您的订单将由HLA（北京海淀区清河中街店）门店安排发货。",
          location: ""
        },
        {
          time: "2018-05-08 21:36:04",
          ftime: "2018-05-08 21:36:04",
          context: "商品已经下单",
          location: ""
        }
      ],
      total:0
    };
  },
  created() {
    this.xr();
  },
  methods: {
    async xr() {
      let res = await this.$API.dingdanliebiao(this.page);
      console.log("订单渲染", res);
      this.order = res.goods;
      this.total=res.total
    },
    handleSizeChange(v){
        this.page.pagesize=v
        this.xr()
    },
    handleCurrentChange(v){
        this.page.pagenum=v
        this.xr()
    }
  }
};
</script>

<style scoped >
</style>
